<template>
    <div class="order-list-item">
        <div class="img">
            <img :src="maintaindata.service_img" alt="">
        </div>
        <div class="content">
            <div class="order_id">订单编号：<span>{{ maintaindata.id }}</span></div>
            <div class="title">维修项目：<span>{{ maintaindata.service_name }}</span></div>
            <div class="status">订单状态：<span>{{ maintaindata.order_status }}</span></div>
            <div class="failure">故障: <span>{{ maintaindata.failure }}</span></div>
            <div class="address">服务地址：<span>
                    {{ maintaindata.districts + ' ' + maintaindata.city + ' ' +maintaindata.county }}
                </span></div>
            <div class="time">预约时间：<span>
                    {{ maintaindata.appointmentDate+' '+ maintaindata.startTime+'-' + maintaindata.endTime}}
                </span></div>
            <div class="take_button">
                <el-button type="info" size="mini" @click="viewOrder">查看订单</el-button>
            </div>
        </div>
        <div class="dialog">
            <el-dialog title="订单详细" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
                <div class="inner_dialog">
                    <el-dialog width="30%" title="更新订单进度" :visible.sync="innerVisible" append-to-body>
                        <div class="inner_dialog_info">
                            <el-form ref="form" :model="form" label-width="100px" :rules="rlues">
                                <el-form-item label="更新订单：" prop="order_status">
                                    <el-select v-model="form.order_status" placeholder="请更新订单">
                                        <el-option label="开始服务" value="3"></el-option>
                                        <el-option label="服务完成" value="4"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="维修材料：" prop="material_maintain">
                                    <el-input v-model="form.material_maintain"></el-input>
                                </el-form-item>
                                <el-form-item label="材料费用：" prop="service_pice">
                                    <el-input v-model="form.service_pice"></el-input>
                                </el-form-item>
                            </el-form>
                            <i style="font-size: 12px; color: #ccc">*若未使用维修材料，请填“无”，材料费用请填“0”</i>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="innerVisible = false">取 消</el-button>
                            <el-button type="primary" size="mini" @click="updateOrder(maintaindata.id)">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <!-- ------订单详细------ -->
                <div class="dialog_info">
                    <div class="info_item">
                        <span><i>订单编号：</i>{{ maintaindata.id }}</span>
                        <span><i>维修项目：</i>{{ maintaindata.service_name }}</span>
                        <span><i>订单状态：</i>{{ maintaindata.order_status }}</span>
                    </div>
                    <div class="info_item">
                        <span>
                            <i>预约发布时间：</i>{{ maintaindata.create_time }}
                        </span>
                    </div>
                    <div class="info_item">
                        <span>
                            <i>接单时间：</i>{{ maintaindata.take_time || '尚未接单' }}
                        </span>
                    </div>
                    <div class="info_item">
                        <span>
                            <i>完成时间：</i>{{ maintaindata.done_time || '尚未完成' }}
                        </span>
                    </div>
                    <div class="info_item">
                        <span><i>客户姓名：</i>{{ maintaindata.linkman }}</span>
                        <span><i>客户联系方式：</i>{{maintaindata.phone }}</span>
                    </div>
                    <div class="info_item">
                        <span><i>维修人员：</i>{{ maintaindata.maintainer_nickname }}</span>
                        <span><i>维修人员联系方式：</i>{{ maintaindata.maintainer_phone }}</span>
                    </div>
                    <div class="info_item">
                        <span>
                            <i>预约时间：</i>
                            {{ maintaindata.appointmentDate+' '+ maintaindata.startTime+'-' + maintaindata.endTime}}
                        </span>
                        <span>
                            <i>服务地址：</i>
                            {{ maintaindata.districts + ' ' + maintaindata.city + ' ' + maintaindata.county }}
                        </span>
                    </div>
                    <div class="info_item"><span><i>故障描述：</i>{{ maintaindata.failure }}</span></div>
                    <div class="info_item"><span><i>备注：</i>{{ maintaindata.remark }}</span></div>
                    <div class="info_item ">
                        <span>维修费用：</span>
                        <p><i>基础维修费用：</i><span class="pice">￥{{ maintaindata.service_pice }}</span></p>
                        <p>
                            <i>维修材料：</i><span class="pice">{{ maintaindata.material_maintain || '无'}}</span>
                            <i>维修材料费用：</i><span class="pice">￥{{ maintaindata.material_pice || 0}}</span>
                        </p>
                        <span>订单总价：
                            <span class="pice">
                                ￥{{ maintaindata.service_pice + maintaindata.material_pice}}
                            </span>
                        </span>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" size="mini" @click="innerVisible = true">更新订单进度</el-button>
                    <!-- <el-button type="primary" size="mini" @click="dialogVisible = false">确 定</el-button> -->
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { updateOrderService } from '@/api/maintainer'
import { Message } from 'element-ui'
export default {
  props: {
    maintaindata: {
      type: Object
    }
  },
  data () {
    return {
      dialogVisible: false,
      innerVisible: false,
      form: {
        order_status: '',
        material_maintain: '',
        service_pice: ''
      },
      rlues: {
        order_status: [
          { required: true, message: '请选择订单状态', trigger: 'blur' }
        ],
        material_maintain: [
          { required: true, message: '请输入维修材料', trigger: 'blur' }
        ],
        service_pice: [
          { required: true, message: '请输入维修费用', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    viewOrder () {
      this.dialogVisible = true
    },
    handleClose (done) {
      done()
    },
    async updateOrder (id) {
      await this.$refs.form.validate()
      this.form.id = id
      this.form.order_status = +this.form.order_status
      const res = await updateOrderService(this.form)
      if (res.status === 0) {
        await Message.success(res.message)
        this.form = {}
        this.$parent.getMaintainList()
      }
      this.innerVisible = false
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.order-list-item {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .img {
        width: 70px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .content {
        flex: 1;
        padding-left: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #555;
        font-size: 12px;

        span {
            font-size: 14px;
            font-weight: bold;
        }
    }
    .dialog{
        .dialog_info{
            span {
                display: inline-block;
                margin: 10px 20px;
                font-size: 14px;
                font-weight: bold;
                    i{
                        font-weight: normal;
                    }
                }
            p{
                display: block;
                padding-left: 40px;
            }
            .pice{
                color: #E23A2E;
                font-size: 18px;
            }
        }
    }
}
</style>
